import 'package:flutter/material.dart';

/// 首页示例2 - 简约风格
class HomePage7 extends StatelessWidget {
  const HomePage7({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return _buildContent(context);
  }
  
  // 构建内容区域
  Widget _buildContent(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildHeader(context),
            const SizedBox(height: 32),
            _buildStatCards(),
            const SizedBox(height: 32),
            _buildRecentActivity(),
            const SizedBox(height: 32),
            _buildPerformanceChart(),
          ],
        ),
      ),
    );
  }
  
  // 构建页面标题
  Widget _buildHeader(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '欢迎回来，管理员',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.w700,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          '首页示例7 - 简约风格',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey[600],
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
  
  // 构建统计卡片
  Widget _buildStatCards() {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isSmallScreen = constraints.maxWidth < 700;
        
        return Wrap(
          spacing: 24,
          runSpacing: 24,
          children: [
            _buildStatCard(
              title: '总用户数',
              value: '8,546',
              changeText: '+12.4%',
              isPositive: true,
              icon: Icons.people_alt_rounded,
              color: Colors.blue,
              isSmallScreen: isSmallScreen,
            ),
            _buildStatCard(
              title: '总收入',
              value: '¥564,112',
              changeText: '+8.2%',
              isPositive: true,
              icon: Icons.attach_money_rounded,
              color: Colors.green,
              isSmallScreen: isSmallScreen,
            ),
            _buildStatCard(
              title: '新订单',
              value: '246',
              changeText: '-2.8%',
              isPositive: false,
              icon: Icons.shopping_cart_rounded,
              color: Colors.orange,
              isSmallScreen: isSmallScreen,
            ),
            _buildStatCard(
              title: '转化率',
              value: '15.3%',
              changeText: '+4.6%',
              isPositive: true,
              icon: Icons.trending_up_rounded,
              color: Colors.purple,
              isSmallScreen: isSmallScreen,
            ),
          ],
        );
      },
    );
  }
  
  // 构建单个统计卡片
  Widget _buildStatCard({
    required String title,
    required String value,
    required String changeText,
    required bool isPositive,
    required IconData icon,
    required Color color,
    required bool isSmallScreen,
  }) {
    return Container(
      width: isSmallScreen ? double.infinity : 230,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                  fontWeight: FontWeight.w500,
                ),
              ),
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  icon,
                  size: 20,
                  color: color,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Text(
            value,
            style: const TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 8),
          Row(
            children: [
              Icon(
                isPositive ? Icons.arrow_upward : Icons.arrow_downward,
                size: 16,
                color: isPositive ? Colors.green : Colors.red,
              ),
              const SizedBox(width: 4),
              Text(
                changeText,
                style: TextStyle(
                  fontSize: 14,
                  color: isPositive ? Colors.green : Colors.red,
                  fontWeight: FontWeight.w500,
                ),
              ),
              const SizedBox(width: 4),
              Text(
                '相比上月',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[600],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
  
  // 构建最近活动
  Widget _buildRecentActivity() {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '最近活动',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Chip(
                label: Text('今日'),
                backgroundColor: Color(0xFFE3F2FD),
                labelStyle: TextStyle(color: Colors.blue),
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildActivityItem(
            title: '新用户注册',
            time: '10分钟前',
            description: '李明注册了账号',
            icon: Icons.person_add_rounded,
            color: Colors.blue,
          ),
          _buildActivityItem(
            title: '新订单',
            time: '30分钟前',
            description: '张三下了一个新订单 #12345',
            icon: Icons.shopping_bag_rounded,
            color: Colors.orange,
          ),
          _buildActivityItem(
            title: '系统更新',
            time: '2小时前',
            description: '系统自动更新到v2.3.0版本',
            icon: Icons.system_update_rounded,
            color: Colors.green,
          ),
          _buildActivityItem(
            title: '支付完成',
            time: '4小时前',
            description: '订单 #12344 已支付完成',
            icon: Icons.payment_rounded,
            color: Colors.purple,
            showDivider: false,
          ),
        ],
      ),
    );
  }
  
  // 构建活动项
  Widget _buildActivityItem({
    required String title,
    required String time,
    required String description,
    required IconData icon,
    required Color color,
    bool showDivider = true,
  }) {
    return Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: color.withOpacity(0.1),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(
                icon,
                size: 24,
                color: color,
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        title,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        time,
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[600],
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Text(
                    description,
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        if (showDivider)
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Divider(),
          )
        else
          const SizedBox(height: 16),
      ],
    );
  }
  
  // 构建性能图表
  Widget _buildPerformanceChart() {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '系统性能',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Row(
                children: [
                  CircleAvatar(
                    radius: 5,
                    backgroundColor: Colors.blue,
                  ),
                  SizedBox(width: 6),
                  Text('CPU'),
                  SizedBox(width: 12),
                  CircleAvatar(
                    radius: 5,
                    backgroundColor: Colors.green,
                  ),
                  SizedBox(width: 6),
                  Text('内存'),
                  SizedBox(width: 12),
                  CircleAvatar(
                    radius: 5,
                    backgroundColor: Colors.orange,
                  ),
                  SizedBox(width: 6),
                  Text('磁盘'),
                ],
              ),
            ],
          ),
          const SizedBox(height: 24),
          SizedBox(
            height: 300,
            child: Center(
              child: Text(
                '这里将显示性能图表',
                style: TextStyle(
                  color: Colors.grey[600],
                  fontSize: 16,
                ),
              ),
            ),
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _buildPerformanceItem(
                title: 'CPU负载',
                value: '32%',
                status: '正常',
                statusColor: Colors.green,
              ),
              _buildPerformanceItem(
                title: '内存使用',
                value: '4.2GB',
                status: '正常',
                statusColor: Colors.green,
              ),
              _buildPerformanceItem(
                title: '磁盘空间',
                value: '75%',
                status: '警告',
                statusColor: Colors.orange,
              ),
              _buildPerformanceItem(
                title: '网络流量',
                value: '1.8MB/s',
                status: '正常',
                statusColor: Colors.green,
              ),
            ],
          ),
        ],
      ),
    );
  }
  
  // 构建性能指标项
  Widget _buildPerformanceItem({
    required String title,
    required String value,
    required String status,
    required Color statusColor,
  }) {
    return Column(
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[600],
          ),
        ),
        const SizedBox(height: 8),
        Text(
          value,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 4),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: statusColor.withOpacity(0.1),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            status,
            style: TextStyle(
              fontSize: 12,
              color: statusColor,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }
} 